<template>
    <div class="container">
      <div class="hotel-desc">酒店简介</div>
      <div class="title">基本信息</div>
      <div class="hotel-info-a">
        <div class="hotel-name">{{ hotelInfo.hotelName }}</div>
        <div class="hotel-phone"><i class="el-icon-phone"></i>：{{ hotelInfo.hotelPhone }}</div>
        <div class="hotel-level"><i class="el-icon-star-on"></i>：{{ hotelInfo.hotelLevel }}</div>
        <div class="hotel-address"><i class="el-icon-location"></i>：{{ hotelInfo.hotelAddress }}</div>
      </div>
      <div class="title">酒店周边</div>
      <div class="hotel-introduction">{{ hotelInfo.hotelIntroduction }}</div>
      <div class="title">入住须知</div>
      <div class="hotel-stipulate"><i class="el-icon-warning"></i> {{ hotelInfo.hotelNotice }}</div>
      <div class="hotel-checkin-time"><i class="el-icon-warning"></i> 入住时间 {{ hotelInfo.hotelPolicyCheckin }} 之后，退房时间 {{ hotelInfo.hotelPolicyCheckout }} 之前</div>
    </div>
</template>

<script>
import {HotelInfo} from "@/api";

export default {
  name: "Index",
  data(){
    return{
      hotelInfo: {}
    }
  },
  methods: {

  },
  created() {
    HotelInfo().then(res => {
      this.hotelInfo = res.data
      console.log(this.hotelInfo)
    })
  }
}
</script>

<style scoped lang="less">
  .container{
    border: 1px solid white;
    border-radius: 8px;
    width: 70%;
    margin: 48px auto auto;
    min-width: 560px;
    background: white;
    padding: 24px 0;
    box-sizing: border-box;
    .title{
      font-weight: 800;
      font-size: 24px;
      margin: 16px 0;
    }
    .hotel-desc{
      font-weight: 800;
      font-size: 32px;
      padding: 8px 0;
    }
    .hotel-info-a{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 40%;
      margin: auto;
      .hotel-name{
        color: white;
        background: red;
        border-radius: 4px;
        border: 1px solid red;
        padding: 4px 4px ;
        font-size: 18px;
        font-weight: 600;
        margin: 8px 0;
      }
      .hotel-phone{
        font-size: 16px;
      }
      .hotel-level{
        font-size: 16px;
      }
      .hotel-address{
        font-size: 16px;
      }
    }
    .hotel-introduction{
      width: 40%;
      margin: auto;
      text-align: left;
    }
    .hotel-checkin-time,.hotel-stipulate{
      width: 40%;
      margin: auto;
      text-align: left;
      color: red;
    }
  }
</style>